<template>
	<view class="content">
		<!-- <view class="shanhua" @touchmove="showBody"></view> -->
		<view class="bg">
			<image :src="user.imgurl" mode="aspectFill"></image>
			<view class="hide"></view>
		</view>
		<view class="top">
			<view class="top-left">
				<image src="../../static/login/back.png" @tap="backIndex"></image>
			</view>
			<view class="top-right">
				<image src="../../static/login/more.png" @tap="toDetail" v-if="isme"></image>
			</view>
		</view>
		<view class="touxiang" :animation="animationData1">
			<image class="img" :src="user.imgurl"></image>
			<view :class="user.sex==0?'gender man':user.sex==1?'gender woman':'gender all'" :animation="animationSex">
				<image v-if="user.sex == 0" src="../../static/login/man.png"></image>
				<image v-if="user.sex == 1" src="../../static/login/woman.png"></image>
				<image v-if="user.sex == 'asexual'" src="../../static/login/sex.png"></image>
			</view>
		</view>
		<view class="info">
			<view class="markname" v-if="!showmarkname">{{user.name}}</view>
			<view class="markname" v-if="showmarkname">{{user.markname}}</view>
			<view class="name" v-if="showmarkname">用户名：{{user.name}}</view>
			<view class="introdu">{{user.explain}}</view>
		</view>
		<view class="button" v-if="!isFriend&&!isme" @tap="showBody">加为好友</view>
		<view class="button" v-if="isFriend&&!isme">开始聊天</view>
		<view class="body" :style="{height:height+'px',bottom:-+height+'px'}" :animation="animationData">
			<view class="name">{{user.name}}</view>
			<textarea placeholder="快来加我好友～" v-model="temp"></textarea>
			<view class="button1" :animation="animationBtn">
				<view class="cancel" @tap="showBody">取消</view>
				<view class="add" @tap="send">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				temp: '',
				user: {
					id: '',
					imgurl: '',
					name: '',
					markname: '',
					sex: '',
					explain: '',
					markname: ''
				},
				showmarkname: false,
				isme: false,
				isFriend: false,
				height: 0,
				left: '',
				touxiang: '',
				top: '',
				isshow: false,
				animationData: {},
				animationData1: {},
				animationSex: {},
				animationBtn: {}
			}
		},
		onReady() {
			this.getHeight()
		},
		onLoad(e) {
			this.user.id = e.id
			const user = uni.getStorageSync('user')
			//判断是否为自己
			if (e.id == user.id) {
				this.isme = true
			}
			//判断是否为好友
			uni.request({
				url: this.url + '/search/isFriend',
				method: 'POST',
				data: {
					uid: user.id,
					fid: e.id
				},
				success: (res) => {
					if (res.data.result == 404) { //非好友
						this.showmarkname = false
					} else if (res.data.result == 200) { //为好友
						this.isFriend = true
						uni.request({ //获取备注
							url: this.url + '/user/getMarkName',
							method: 'POST',
							data: {
								uid: user.id,
								fid: e.id
							},
							success: (res) => {
								this.user.markname = res.data.result.markname ? res.data.result.markname : ''
								if (this.user.markname == '') { //没有备注
									this.showmarkname = false
								} else { //有备注
									this.showmarkname = true
								}
							}
						})
					}
				}
			})
			uni.request({
				url: this.url + '/user/userDetail',
				method: 'POST',
				data: {
					id: this.user.id
				},
				success: (res) => {
					console.log(res)
					this.user.imgurl = this.url + '/user/' + res.data.result.imgurl
					this.user.name = res.data.result.name
					this.user.explain = res.data.result.explain ? res.data.result.explain : '这个人很懒，什么也没写(。>︿<)_θ'
					this.user.sex = res.data.result.sex
				}
			})
		},
		methods: {
			send() {
				uni.request({
					url: this.url + '/friend/addFriend',
					method: 'POST',
					data: {
							uid: uni.getStorageSync('user').id,
							fid: this.user.id,
							msg: this.temp
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '发送失败，请重新发送！',
						})
					},
					success: (res) => {
						console.log(res)
						setTimeout(() => {
							this.showBody()
						}, 500)
						uni.showToast({
							title: '发送成功！',
							icon: 'success',
							duration: 500
						})
					}
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '../detail/detail?id=' + this.user.id,
					animationType: 'pop-in'
				})
			},
			getHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.touxiang').boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					console.log("节点离页面顶部的距离为" + data.top);
					this.top = data.top
					this.touxiang = data.height
				}).exec();
				query.select('.top-left').boundingClientRect(data => {
					this.left = data.right
					const res = uni.getSystemInfoSync()
					this.height = res.windowHeight
					this.left = (res.windowWidth / 2) - this.left
					this.height = this.height - this.top - (this.touxiang / 2)
					console.log("top:" + this.top)
					console.log("height:" + this.height)
					console.log("touxiang:" + this.touxiang)
					console.log("this.height:" + this.height)
				}).exec();

			},
			showBody() {
				this.temp = ''
				this.isshow = !this.isshow
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				var animation1 = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				var animation2 = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				var animation3 = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				if (this.isshow) {
					animation.bottom(0).step()
					animation1.translateX(-((this.left - (this.touxiang / 2)) * 400 / 240)).scale(240 / 400).step()
					animation2.opacity(0).step()
					animation3.opacity(1).step()
				} else {
					animation.bottom(-this.height).step()
					animation1.step()
					animation2.opacity(1).step()
					animation3.opacity(0).step()
				}
				this.animationData = animation.export()
				this.animationData1 = animation1.export()
				this.animationSex = animation2.export()
				this.animationBtn = animation3.export()
			},
			backIndex() {
				uni.navigateBack({
					animationType: 'pop-out'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	// .shanhua{
	// 	width: 100%;
	// 	height: 100%;
	// 	z-index: 1;
	// 	position: fixed;
	// 	top: 0;
	// 	opacity: 0;
	// }
	.bg {
		z-index: -5;
		position: fixed;
		top: 0;
		height: 100%;
		width: 100%;

		image {
			height: 100%;
			width: 100%;
			filter: blur(16px);
		}

		.hide {
			position: fixed;
			top: 0;
			width: 110%;
			height: 110%;
			background-color: rgba(255, 255, 255, 0.4);
		}
	}

	.top {
		background-color: rgba(255, 255, 255, 0);
		border: none;

		.top-left {
			height: 88rpx;
			display: flex;
			align-items: center;
			margin-left: 32rpx;

			image {
				width: 28rpx;
				height: 48rpx;
			}
		}

		.top-right {
			height: 88rpx;
			display: flex;
			align-items: center;
			margin-right: 32rpx;

			image {
				width: 52rpx;
				height: 12rpx;
			}
		}
	}

	.touxiang {
		position: relative;
		z-index: 1;
		height: 400rpx;
		width: 400rpx;
		margin: auto;
		margin: 148rpx auto 48rpx;

		.img {
			width: 400rpx;
			height: 400rpx;
			border-radius: 48rpx;
			border: 6rpx solid white;
		}

		.man {
			background-color: #4AAAFF;
		}

		.woman {
			background-color: #FF5D5B;
		}

		.all {
			background-color: rgb(39, 40, 50);
		}

		.gender {
			position: absolute;
			bottom: 16rpx;
			right: 16rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: auto;
			}
		}
	}

	.info {
		width: 552rpx;
		margin: 0 auto;

		.markname {
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			font-size: 52rpx;
			font-weight: 600;
		}

		.name {
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			font-size: 35rpx;
			margin-bottom: 50rpx;
		}

		.introdu {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #272832;
			line-height: 48rpx;
			text-align: center;
		}
	}

	.button {
		background-color: $uni-color-primary;
		width: 684rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 10rpx;
		position: fixed;
		bottom: 76rpx;
		right: 32rpx;
	}

	.body {
		width: 100%;
		border-radius: 40rpx 40rpx 0 0;
		background-color: white;
		position: fixed;

		.name {
			margin: 168rpx 0 0 60rpx;
			font-size: 52rpx;
			height: 74rpx;
			line-height: 74rpx;
			font-weight: 600;
		}

		textarea {
			background-color: #F3F4F6;
			border-radius: 20rpx;
			width: 594rpx;
			padding: 18rpx 22rpx;
			margin: 40rpx 56rpx;
		}

		.button1 {
			opacity: 0;
			position: absolute;
			bottom: 76rpx;
			width: 686rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;

			.add {
				width: 480rpx;
				background-color: $uni-color-primary;
				font-size: 32rpx;
				border-radius: 10rpx;
			}

			.cancel {
				width: 172rpx;
				background-color: $uni-bg-color-grey;
				font-size: 32rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
